<template>
    <sky-base-page ref="skyBasePageRef" :api-obj="qly.api.order.info"
                   :params="params" type="data" btnPadding="0" refresherEnabled
                   bg-page-color="#f5f5f5" @success="getOrderInfo">
        <template #default="{dataInfo}">
            <refund-status-card :refundInfo="refundInfo"/>
            <!-- 商品卡片-->
            <goods-card :orderInfo="dataInfo" :showInfo="false"/>
            <refund-info-card :orderInfo="dataInfo" :refundInfo="refundInfo"/>
        </template>
        <template #footer>
            <view class="btn-box" v-if="refundInfo.status==='1'">
                <view class="item">
                    <up-button type="primary" text="驳回" @tap="reject"></up-button>
                </view>
                <view class="item">
                    <up-button type="primary" text="通过" @tap="confirm"></up-button>
                </view>
            </view>
        </template>
    </sky-base-page>
    
    <!--    订单驳回-->
    <refundRejectPopup ref="refundRejectPopupRef" @success="refreshInfo"/>
</template>
<script setup>
import goodsCard from './components/goodsCard.vue'
import refundInfoCard from './components/refundInfoCard.vue'
import refundRejectPopup from './components/refundRejectPopup.vue'
import refundStatusCard from './components/refundStatusCard.vue'

const refundRejectPopupRef = ref()
const skyBasePageRef = ref()
const params = ref({})
const orderInfo = ref({})
const refundInfo = ref({})
const getOrderInfo = (data) => {
    orderInfo.value = data
    console.log('data', data)
}

// 获取退款信息
const getRefundInfo = async () => {
    const res = await qly.api.order.order_refund.info({order_id: params.value.id})
    if (res.code === 1) {
        refundInfo.value = res.data
        console.log('refundInfo.value', refundInfo.value)
    } else {
        qly.dialog.apiError(res).catch()
    }
}

// 审核通过
const confirm = async () => {
    const res = await qly.dialog.messageBox({
        title: '提示',
        message: '确定通过吗？'
    })
    if (res) {
        const data = {
            order_id: params.value.id,
            status: 3,
        }
        const res = await qly.api.order.order_refund.check(data)
        if (res.code === 1) {
            qly.dialog.toast({title: '操作成功'})
            refreshInfo()
        } else {
            qly.dialog.apiError(res).catch()
        }
    }
}

// 驳回
const reject = () => {
    refundRejectPopupRef.value.open(params.value.id)
}

const refreshInfo = () => {
    skyBasePageRef.value.refresh()
}

qly.page.onLoad(() => {
    params.value = qly.page.params
    getRefundInfo()
})
</script>
<style scoped lang="scss">
.btn-box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24rpx;
    background-color: #fff;
    padding: 24rpx;
    box-sizing: border-box;
    border-top: 2rpx solid #eee;
    
    .item {
        flex: 1;
    }
}
</style>
